<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>播放历史</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="referrer" content="no-referrer"/>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript" src="/js/Util.js"></script>
</head>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
		text-align: center;
	}
	body{
		margin: 0px auto;
	}
	.header{
		padding: 1vh 0;
		width: 100%;
    	border-bottom: 1px solid gainsboro;
	}
	.footer{
		color: #666;
		padding: 1vh 0;
		width: 100%;
    	border-top: 1px solid gainsboro;
	}
	.body{
		margin: 1em 0;
	}
	#content{
		width: 96%;
		padding: 0 2%;
	}
	.desc{
		width: calc(100% - 35vw);
		margin-left: 3vw;
		height: 9vh;
		vertical-align: top;
		display: inline-block;
	}
	.desc div{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.coverImg{
		border-radius: 1vh;
		width: 30vw;
		height: 9vh;
		min-height: 3.5em;
	}
	.card{
		margin: .7em 0;
	}
	.card *{
		text-align: left;
	}
	.h3 *{
		font-size: 1em;
    	font-weight: bold;
	}
	.vname{
		padding-left: .5em;
		font-size: .8em;
	}
	.hasplay{
		font-size: .8em;
	}
	.hasover{
		padding-left: .6em;
		font-size: .8em;
	}
	text *{
		font-size: .9em;
		display: block;
	}
	text span.hasplay::before {
		content: '观看到';
		padding: .3em;
		font-size: .8em;
	}
	.desc text{
		color: darkgrey;
	}
</style>
<body>
	<div class="header" style="position: fixed;background-color: white;">观看历史</div>
	<div class="header">观看历史</div>
	<div class="body">
		<ul id="content">
			<!--<li class="card" >
				<img class="coverImg" src="http://pic9.iqiyipic.com/image/20211026/0b/0d/a_100482398_m_601.jpg">
				<div class="desc">
					<div class="h3">
						<span>时光音乐会</span><span style="padding-left: 1em;">第14期：韩红蔡国庆齐聚年夜饭</span>
					</div>
					<text>123132</text>
				</div>
			</li>-->
		</ul>
	</div>
	<div class="footer" id="more">
		更多
	</div>
	<template id="temp">
		<li class="card" >
			<a href="" target="_parent" style="text-decoration: none;">
				<img class="coverImg" src="http://pic9.iqiyipic.com/image/20211026/0b/0d/a_100482398_m_601.jpg">
				<div class="desc">
					<div class="h3">
						<span>时光音乐会</span><span class="vname">第14期：韩红蔡国庆齐聚年夜饭</span>
					</div>
					<text>
						<span >今天 15:01</span>
						<span class="hasplay">已看完</span>
					</text>
				</div>
			</a>
		</li>
	</template>
</body>
<script type="text/javascript">

	var content = document.getElementById('content');
	$("#more").click(more);
	var pageNo = 1;
	more();
	function more(){
		if ($("#more").attr("loading")) {
			return;
		}
		$("#more").attr("loading", "true");
		$.get("/user/videoHistory",{pagesize: 10, pageno:pageNo},function(d){
			if (d.code == 0){
				var data = d.data;
				if (!data.more){
					$("#more").unbind('click');
					$("#more").text("没有更多了");
				}
				for (var i = 0, l = data.list.length; i < l; i ++){
					content.appendChild(createCard(data.list[i]));
				}
				$("#more").removeAttr("loading");
				pageNo ++;
			}
		})
	}

	$(window).on("resize scroll",function(){
		if ($("#more").text() === "没有更多了") {
			return;
		}
		// 当前窗口的高度
		var windowHeight = $(window).height();
		// 当前滚动条位置
		var scrollTop = $(window).scrollTop();
		// 当前文档的高度
		var docHeight = $(document).height();
		// 滚动条滚动的距离 + 窗口的高度 = 文档的高度
		if (scrollTop + windowHeight >= docHeight - 10) {
			$("#more").click();
		}
	});

	function createCard(data){
		var t = document.getElementById("temp");
		var template = document.importNode(t.content, true);
		var a = template.querySelector("a");
		a.setAttribute("href", "/play?docid=" + data.docid + "&tvid=" + data.vid + "&platform=" + data.platform);
		var img = template.querySelector(".coverImg");
		img.setAttribute("src", data.url);
		var span = template.querySelector(".h3").getElementsByTagName("span");
		span[0].innerText = data.title;
		span[1].innerText = data.description;
		a.setAttribute("title", "[" + data.title + "]" + data.description)
		var text = template.querySelector("text");
		var date = text.querySelector("span");
		date.innerHTML = formatDate(data.time);
		var hasplay = text.querySelector(".hasplay")
		hasplay.innerHTML = formatTime(data.hasplay);
		if (data.hasplay < 0){
			hasplay.setAttribute("class", "");
			hasplay.innerHTML = "已看完";
		}
		return template;
	}
	var f = function(num){
		num = parseInt(num);
		if (num < 10){
			return "0" + num;
		}
		return num;
	}
	function formatTime(time){
		var hours = parseInt(time / 3600);
		time = time % 3600;
		var mins = time/60;
		var sec = time%60;
		var temp = f(mins) + ":" + f(sec);
		if (hours > 0){
			return f(hours) + ":" + temp;
		}
		return temp;
	}
	function formatDate(dateString){
		var date = new Date(dateString);
		var today = new Date();
		today.setHours(0,0,0,0);//获取当前日期时间
　　		var time = date.getTime() - today.getTime();
		var formatTime = f(date.getHours()) + ":" + f(date.getMinutes());
		if (time > 0) {
			return "今天 " + formatTime;
		}
		else if (-1*time < 24*3600000) {
			return "昨天 " + formatTime;
		}
		else if (date.getFullYear() == today.getFullYear()) {
			return f((date.getMonth() + 1)) + "-" + f(date.getDate()) + " " + formatTime;
		}
		else{
			return date.getFullYear() + "-" + f((date.getMonth() + 1)) + "-" + f(date.getDate()) + " " + formatTime;
		}
	}
</script>
</html>